import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Input, Button, message } from 'antd';
import React, { Component } from 'react';
import { register } from '@/services/login';
const forge = require('node-forge');

class NormalLoginForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      confirmDirty:false
    }
  }
  md5pw(value) {
    let md = forge.md.md5.create();
    md.update(value);
    return md.digest().toHex();
  }
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        register({
          username: values.username,
          password: this.md5pw(values.password),
          tenantUrl: 'default',
        }).then(res => {
          if (res.retCode == '0'){
            message.success(res.message)
            this.props.changeFlag(1)
          }else {
            message.error(res.message)
          }
        });

      }
    });
  };
  handleConfirmBlur = e => {
    const { value } = e.target;
    this.setState({ confirmDirty: this.state.confirmDirty || !!value });
  }
  render() {
    const { getFieldDecorator } = this.props.form;

    const validateToNextPassword = (rule, value, callback) => {
      const { getFieldValue } = this.props.form;
      const { form } = this.props;
      const reg = /^\w{4,16}$/
      if (value && !reg.test(value)){
        callback('密码格式错误！密码长度4-16位')
      }
      if (value && this.state.confirmDirty) {
        form.validateFields(['confirmPassword'], { force: true });
      }
      callback()
    };
    const passwordValidator = (rule, value, callback) => {
      const { getFieldValue } = this.props.form;
      if (value && value !== getFieldValue('password')) {
        callback('两次密码输入不一致');
      }
      // 必须总是返回一个 callback，否则 validateFields 无法响应
      callback();
    };
    return (
      <Form style={{width:368}} onSubmit={this.handleSubmit} className="login-form">
        <Form.Item>
          {getFieldDecorator('username', {
            rules: [{ required: true,pattern: /^\w{4,12}$/, message: '用户名允许字母、数字和下划线，长度4-12位！' },],
          })(
            <Input
              size="large"
              prefix={<UserOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
              placeholder="用户名"
            />,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('password', {
            rules: [{
              required: true, message: '请输入密码'},{
              validator: validateToNextPassword,
            }],
          })(
            <Input
              size="large"
              prefix={<LockOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
              type="password"
              placeholder="请输入密码"
            />,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('confirmPassword', {
            rules: [{ required: true, message: '请再次输入密码！' },{
              validator: passwordValidator,
            },],
          })(
            <Input
              onBlur={this.handleConfirmBlur.bind(this)}
              size="large"
              prefix={<LockOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
              type="password"
              placeholder="再次输入密码"
            />,
          )}
        </Form.Item>
        <Form.Item>
          <Button style={{ width: '100%', marginTop: '24px' }} size="large" type="primary" htmlType="submit" className="login-form-button">
            注册
          </Button>
        </Form.Item>
      </Form>
    );
  }
}

export default Form.create()(NormalLoginForm);
